<template>
    <el-menu mode="horizontal" router default-active="/index/wordtest" >
       <template v-for="(e,i) in menus">
            <el-sub-menu v-if="e.children">
                <template #title>
                    <el-icon>
                        <component :is="e.icon"></component>
                    </el-icon>
                    {{ e.title }}
                </template>
                <el-menu-item v-for="ee in e.children" :index="ee.path">
                   <el-icon>
                       <component :is="ee.icon"></component>
                   </el-icon>
                   {{ e.title }}
                </el-menu-item>
            </el-sub-menu>
            <el-menu-item v-else :index="e.path">
                <el-icon>
                    <component :is="e.icon"></component>
                </el-icon>
                {{ e.title }}
            </el-menu-item>
       </template>
    </el-menu>
</template>
<script setup>
    import { reactive } from 'vue';
    const menus = reactive([
        {
            title:"今天吃什么",
            path:'/index/food',
            icon:"Food",
        },{
            title:"单词录入",
            path:'/index/wordinput',
            icon:"Upload"
        },{
            title:"单词管理",
            path:'/index/wordmanage',
            icon:"Notebook"
        },{
            title:"单词测验",
            path:'/index/wordtest',
            icon:"EditPen"
        },{
            title:"新闻热点",
            path:"/index/newsfocus",
            icon:"Tickets"
        },{
            title:"chatgpt",
            path:"/index/chatgpt",
            icon:"ChatLineRound"
        }
    ])

</script>
<style scoped>
.el-menu{
    user-select: none;
    width: 100vw;
    height: 100%;
    text-align: center;
}
</style>
